﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雷达图</title>

    <style type="text/css">
        body {
            background: #efefef;
        }

        #container {
            width: 1012px;
            margin: 0 auto;
        }

        #left {
            float: left;
            width: 500px;
            padding: 0;
            margin: 0;
        }

        #canvas {
            border-radius: 10px;
            background: #fff;
        }

        #right {
            float: left;
            width: 300px;
            height: 500px;
            margin: 0 0 0 12px;
            padding: 0;
        }

        .output {
            display: inline-block;
            margin: 0;
            width: 100%;
            height: 480px;
            overflow: auto;
            font-family: sans-serif;
            font-size: 1em;
            line-height: 1.2em;
            padding: 10px;
            border-radius: 10px;
            border: 1px dashed #ccc;
            background: #fff;
        }

        #content {
            position: absolute;
            opacity: 0.8;
            background-color: #464343;
            top: 0px;
            left: 0px;
            border-radius: 10px;
            color: #fff;
            font-size: 5pt;
            width: 170px;
            height: 170px;
            display: none;
        }

        p {
            line-height: 5px;
            padding: 1px;
            text-align: center;
        }
    </style>
</head>
<body>


    <div id="container">
        <div style="width: 634px; height: 556px; text-align: center; border-radius: 10px; background: #fff;" id="left">
            <canvas id="canvas" width="556" height="556"></canvas>
        </div>
    </div>
    <div id="content">
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/control.js"></script>
    <script type="text/javascript" src="js/cce.js"></script>
    <script type="text/javascript" src="js/event/Event.js"></script>
    <script type="text/javascript" src="js/event/EventTarget.js"></script>
    <script type="text/javascript" src="js/event/EventManager.js"></script>

    <script type="text/javascript" src="js/Container.js"></script>
    <script type="text/javascript" src="js/SortArray.js"></script>

    <script type="text/javascript" src="js/shape/DisplayObject.js"></script>
    <script type="text/javascript" src="js/shape/Rectangle.js"></script>
    <script type="text/javascript" src="js/shape/Circle.js"></script>
    <script type="text/javascript" src="js/shape/Polygon.js"></script>
    <script type="text/javascript" src="js/shape/Lines.js"></script>
    <script type="text/javascript" src="js/shape/LinesNoCenter.js"></script>
    <script type="text/javascript" src="js/shape/Region.js"></script>
    <script type="text/javascript" src="js/shape/SetText.js"></script>
    <script type="text/javascript" src="js/shape/RectangleRadius.js"></script>

    <script type="text/javascript">
        var oDiv = document.getElementById('content');
        document.onmousemove = function (even) {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

            var oEvent = even || event;
            oDiv.style.top = scrollTop + oEvent.clientY + "px";
            oDiv.style.left = scrollLeft + oEvent.clientX + "px";
        }


        var mData = [
                     { name: '3室2厅2卫(高层)', xm_max: 77, xm_min: 11, hz: 20, xjl: [40, 58, 56] },
                     { name: '4室2厅2卫(高层)', xm_max: 72, xm_min: 22, hz: 55, xjl: [60, 33, 22] },
                     { name: '3室2厅2卫(高层)', xm_max: 46, xm_min: 33, hz: 67, xjl: [34, 78, 17] },
                     { name: '3室2厅1卫(高层)', xm_max: 50, xm_min: 44, hz: 90, xjl: [79, 34, 89] },
                     { name: '2室2厅2卫(洋房)', xm_max: 80, xm_min: 43, hz: 56, xjl: [76, 23, 90] },
                     { name: '3室2厅2卫(高层)', xm_max: 60, xm_min: 64, hz: 32, xjl: [23, 68, 11] }]

        var mCountBianshu = 10; //圈数
        var mCount = mData.length; //边数
        var mCenter = 278; //中心点
        var mRadius = mCenter - 100; //半径(减去的值用于给绘制的文本留空间)
        var mAngle = Math.PI * 2 / mCount; //角度
        var mCtx = null;
        var mColorPolygon = '#B8B8B8'; //多边形颜色
        var mColorLines = '#B8B8B8'; //顶点连线颜色
        var mColorText = '#000000';
        var RegionsPoints = [];
        var RegionsPoints2 = [];
        var linPoints = [];
        var linTextPoints = [];
        var xmpbColor = '#2cceff';
        var hzzdhColor = '#6769be';
        var xjlColor = '#EEC619';
        //点击控制隐藏和显示
        var isxjl = true;
        var ishzzdh = true;
        var isxmpb = true;

        var arrXmpb = [{ x: 40, y: 502, width: 24, height: 15, radius: 5 }];
        var arrHzzdh = [{ x: 205, y: 502, width: 24, height: 15, radius: 5 }];
        var arrXjl = [{ x: 373, y: 502, width: 24, height: 15, radius: 5 }];


        var output = document.getElementById('msg');
        var canvas = document.getElementById("canvas");
        var ctx3 = canvas.getContext('2d');
        var container = new cce.Container(canvas);
        container.enableMouse();
        container.enableClick();
        //画10层圈
        var Polygon = new cce.Polygon(null, mRadius, mCountBianshu, mColorPolygon, mAngle);
        container.addChild(Polygon);
        Polygon.draw();
        //添加文字
        for (var i = 0; i < mData.length; i++) {
            var setTxt = new cce.SetText(i, mCenter, mCount, mRadius, mColorLines, mAngle, mData);
            container.addChild(setTxt);
            setTxt.draw();
        }
        //文字添加事件
        drawBiaoTi();
        //画6条顶点连线
        var Lines = new cce.Lines(linPoints, mCenter);
        container.addChild(Lines);
        Lines.draw();
        /*项目配比安全区域start*/
        //画区域1线条
        createRegionPoints("xm_max");
        var LinesRegion = new cce.LinesNoCenter(RegionsPoints, xmpbColor);
        container.addChild(LinesRegion);
        LinesRegion.draw();
        //画区域1
        createRegionPoints("xm_max");
        var Region = new cce.Region(0,RegionsPoints, "rgba(188, 234, 248,0.9)", "#d61d1d");
        container.addChild(Region);
        Region.draw();
        //画区域2线条
        createRegionPoints("xm_min");
        var LinesRegion2 = new cce.LinesNoCenter(RegionsPoints, xmpbColor);
        container.addChild(LinesRegion2);
        LinesRegion2.draw();
        //画区域2
        createRegionPoints2("xm_min");
        var Region1 = new cce.Region(1,RegionsPoints, "rgba(255, 255, 255,0.4)", "#fff");
        container.addChild(Region1);
        Region1.draw();
        /*项目配比安全区域end*/

        //画货值最大化配比曲线
        createRegionPoints("hz");
        var LinesHuozhi = new cce.LinesNoCenter(RegionsPoints, hzzdhColor);
        container.addChild(LinesHuozhi);
        LinesHuozhi.draw();
        var LinesHuozhiRegion1 = new cce.Region(0,RegionsPoints, "rgb(255, 255, 255,0.01)", "#fff");
        container.addChild(LinesHuozhiRegion1);
        LinesHuozhiRegion1.draw();
        createRegionPoints2("hz");
        var LinesHuozhiRegion2 = new cce.Region(1,RegionsPoints, "rgba(255, 255, 255,0.01)", "#fff");
        container.addChild(LinesHuozhiRegion2);
        LinesHuozhiRegion2.draw();
        //创建多条现金流曲线
        crateXjl();
        
        ////画现金流回正配曲线
        //createRegionPointxjls(0);
        //var LinesXainJing = new cce.LinesNoCenter(RegionsPoints, xjlColor);
        //container.addChild(LinesXainJing);
        //LinesXainJing.draw();
        //var LinesXainJingRegion1 = new cce.Region(RegionsPoints, "rgb(255, 255, 255,0.01)", "");
        //container.addChild(LinesXainJingRegion1);
        //LinesXainJingRegion1.draw();
        //createRegionPointsjxl2(0);
        //var LinesXainJingRegion2 = new cce.Region(RegionsPoints, "rgba(255, 255, 255,0.01)", "");
        //container.addChild(LinesXainJingRegion2);
        //LinesXainJingRegion2.draw();


        ////画现金流回正配曲线2
        //createRegionPointxjls(1);
        //var LinesXainJing1 = new cce.LinesNoCenter(RegionsPoints, xjlColor);
        //container.addChild(LinesXainJing1);
        //LinesXainJing1.draw();
        //var LinesXainJingRegion11 = new cce.Region(RegionsPoints, "rgb(255, 255, 255,0.01)", "");
        //container.addChild(LinesXainJingRegion11);
        //LinesXainJingRegion11.draw();
        //createRegionPointsjxl2(1);
        //var LinesXainJingRegion21 = new cce.Region(RegionsPoints, "rgba(255, 255, 255,0.01)", "");
        //container.addChild(LinesXainJingRegion21);
        //LinesXainJingRegion21.draw();

        //画三个title 标题矩形和文字start
        drawTitleButton(arrXmpb[0].x, arrXmpb[0].y, arrXmpb[0].width, arrXmpb[0].height, arrXmpb[0].radius, xmpbColor, 'fill');
        drawTitleButton(arrHzzdh[0].x, arrHzzdh[0].y, arrHzzdh[0].width, arrHzzdh[0].height, arrHzzdh[0].radius, hzzdhColor, 'fill');
        drawTitleButton(arrXjl[0].x, arrXjl[0].y, arrXjl[0].width, arrXjl[0].height, arrXjl[0].radius, xjlColor, 'fill');

        var radiusRactXjl = new cce.RectangleRadius(arrXjl[0].x, arrXjl[0].y, 30, 20, 10, '#fff', 'fill');
        container.addChild(radiusRactXjl);
        radiusRactXjl.draw();
        var radiusRactHzdh = new cce.RectangleRadius(arrHzzdh[0].x, arrHzzdh[0].y, 30, 20, 10, '#fff', 'fill');
        container.addChild(radiusRactHzdh);
        radiusRactHzdh.draw();
        var radiusRactXmpb = new cce.RectangleRadius(arrXmpb[0].x, arrXmpb[0].y, 30, 20, 10, '#fff', 'fill');
        container.addChild(radiusRactXmpb);
        radiusRactXmpb.draw();
        drawTitleText();

        //画三个title 标题矩形和文字end


        //下面为每一个元素添加事件
        /*货值事件start*/
        LinesHuozhiRegion1.addListener("mouseover", function () {
            if (ishzzdh)
                showLineHuozhiLiu();
        });
        LinesHuozhiRegion1.addListener("mouseout", function () {
            hiddenTit();
        });
        LinesHuozhiRegion2.addListener("mouseover", function () {
            hiddenTit();
        });
        LinesHuozhiRegion2.addListener("mouseout", function () {
            if (ishzzdh)
                showLineHuozhiLiu();
            //appendMsg("out.. 货值")
        });
        /*货值事件end*/

        /*现金流事件start*/


        //LinesXainJingRegion11.addListener("mouseover", function () {
        //    if (isxjl)
        //        showLineXianJingLiu(1);
        //});
        //LinesXainJingRegion11.addListener("mouseout", function () {
        //    hiddenTit();
        //});
        //LinesXainJingRegion21.addListener("mouseover", function () {
        //    hiddenTit();
        //});
        //LinesXainJingRegion21.addListener("mouseout", function () {
        //    if (isxjl)
        //        showLineXianJingLiu(1);
        //});
        /*现金流事件end*/
        LinesHuozhi.addListener("mouseover", function () {
        });
        LinesHuozhi.addListener("mouseout", function () {
        });
        Region.addListener("mouseover", function () {
            if (isxmpb)
                showSafeRestion();
        });
        Region.addListener("mouseout", function () {
            hiddenTit();
        });

        Region1.addListener("mouseover", function () {
            hiddenTit();
        });
        Region1.addListener("mouseout", function () {
            if (isxmpb)
                showSafeRestion();
        });
        radiusRactXjl.addListener("click", function () {
            //清空画布
            ctx3.clearRect(0, 0, $("#canvas").width(), $("#canvas").height());
            var color = isxjl ? "rgb(255,255,255,0.1)" : xjlColor;
            var color2 = isxjl ? "#ccc" : xjlColor;
            if (isxjl) {
                isxjl = false;
            }
            else {
                isxjl = true;
            }
            ReXjlDraw();
            drawTitleButton(arrXjl[0].x, arrXjl[0].y, arrXjl[0].width, arrXjl[0].height, arrXjl[0].radius, color2, 'fill');


            //appendMsg("click at 现金流");
        });
        radiusRactHzdh.addListener("click", function () {
            //清空画布
            ctx3.clearRect(0, 0, $("#canvas").width(), $("#canvas").height());
            var color = ishzzdh ? "rgb(255,255,255,0.1)" : hzzdhColor;
            var color2 = ishzzdh ? "#ccc" : hzzdhColor;
            if (ishzzdh) {
                ishzzdh = false;
            }
            else {
                ishzzdh = true;
            }
            ReHzdhDraw();
            drawTitleButton(arrHzzdh[0].x, arrHzzdh[0].y, arrHzzdh[0].width, arrHzzdh[0].height, arrHzzdh[0].radius, color2, 'fill');


            //appendMsg("click at 货值最大化");
        });
        radiusRactXmpb.addListener("click", function () {
            //清空画布
            ctx3.clearRect(0, 0, $("#canvas").width(), $("#canvas").height());
            var color2 = isxmpb ? "#ccc" : xmpbColor;
            if (isxmpb) {
                isxmpb = false;
            }
            else {
                isxmpb = true;
            }

            drawTitleButton(arrXmpb[0].x, arrXmpb[0].y, arrXmpb[0].width, arrXmpb[0].height, arrXmpb[0].radius, color2, 'fill');
            ReXmpbDraw();


        });
    </script>
</body>
</html>
